<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="__PUBLIC__/Css/Admin/Bootstrap/bootstrap.min.css" rel="stylesheet"  >
<link href="__PUBLIC__/Js/jqui/jquery-ui.min.css" rel="stylesheet"  >
<script src='__PUBLIC__/Js/jquery-3.1.0.min.js'></script>
<script src='__PUBLIC__/Js/jqPaginator.js'></script>
<script src='__PUBLIC__/Js/jqui/jquery-ui.min.js'></script>

<style>
	#dialog-confirm,#dialog-confirm2,#msg{		
			display:none;
		}
		#msg{
			position:absolute;
			margin-left:500px;
			margin-top:-28px;
		}
</style>
</head>
<body> 
<div id="dialog-confirm" >
	     <h3>商品总属性修改</h3>
			<p>属&nbsp;性ID&nbsp;<span id='attr_id'></span></p>
			<p>属&nbsp;性&nbsp;名&nbsp;称<input type="text" name='attr_name'/></p>
			<p>属性默认值<input type="text" name='def_att_val'/></p>
			类&nbsp;型&nbsp;名<select name="types" id="types">
								<volist name='types' id='vo'>
									<option value='<{$vo.id}>'><{$vo.type_name}></option>
								</volist>		
							 </select>
</div>
<div id="dialog-confirm2" >
	     <h3>商品总属性添加</h3>
			<p>属&nbsp;性&nbsp;名&nbsp;称<input type="text" name='attr_name2'/></p>
			<p>属性默认值<input type="text" name='def_att_val2'/></p>
			类&nbsp;型&nbsp;名<select name="type" id="type">
								<volist name='types' id='vo'>
									<option value='<{$vo.id}>'><{$vo.type_name}></option>
								</volist>		
							 </select>
			
</div>		
<table class='table table-bordered'>   
	     
</table>
   <ul class="pagination" id="pagination"></ul>
<script>
	$(function(){
		 $.jqPaginator("#pagination",{
            totalPages: <{$pagetotal}>,
            visiblePages: <{$pagetotal}>,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"></i>上一页</a></li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"></i></a></li>',
            last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            onPageChange: function (num,type) {
              var  html=" <thead><tr><th colspan='5'>当前位置:商品管理>>商品总属性列表</th></tr><tr><td colspan='5'><button type='button' name='but_add' class='btn btn-primary'>添加</button>&nbsp;&nbsp;<span style='margin-left:150px;' id='msg'>&nbsp;</span></td></tr><tr><th>ID</th><th>属性名称"
				  +"</th><th>属性默认值</th><th>类型名</th><th>操作</th></tr></thead>";	 	
			$.get("<{:U('doattr')}>",{p:num},function(data){
				$(data).map(function(k,v){
					html+="<tbody><tr id=attr_"+v.id+"><td>"+v.id+"</td><td>"+v.attr_name+"</td><td>"+v.def_att_val
					+"</td><td>"+v.type_name+"</td><td><button type='button'data-id="+v.id+" name='but_edit' class='btn btn-success'>编辑</button>&nbsp;<button type='button' data-id="+v.id+" name='but_del' class='btn btn-danger'>删除</button></td></tr></tbody>";	 
					$('table').html(html);				
				});
			},'json');    
            }
        });
		//添加
			$(document).on('click','[name=but_add]',function(){
				$("#dialog-confirm2").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'添加确认',
		      buttons: {
		        "确认": function() {	
				var name=	$("[name='attr_name2']").val();
				var def=	$("[name=def_att_val2]").val();					
				var type=	$("#type").val();					
			  	$.get("<{:U('doattradd')}>",{type_id:type,attr_name:name,def_att_val:def},function(data){
					if(data.status==1){	
					        location.reload();
							$('#msg').text(data.msg);
							$('#msg').css("display","block");
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
						}else{
							$('#msg').text(data.msg);
							$('#msg').css("display","block");
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json')
				$( this ).dialog( "close" );        
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });			
		})
		//编辑
		$(document).on('click','[name=but_edit]',function(){
			var id=$(this).attr('data-id');
			 $.get("<{:U('attrEdit')}>",{id:id},function(data){
					$("#attr_id").text(data.id);
					$("[name='attr_name']").val(data.attr_name);
					$("[name='def_att_val']").val(data.def_att_val);
				},'json');
			$("#dialog-confirm").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'修改确认',
		      buttons: {
		        "确认": function() {
				var id=	$("#attr_id").text();
				var type=	$("#types").val();
				var val=	$("#types :selected").text();	
				var name=	$("[name='attr_name']").val();
				var def =	$("[name='def_att_val']").val();
			  	$.get("<{:U('doattrEdit')}>",{id:id,type_id:type,attr_name:name,def_att_val:def},function(data){
					if(data.status==1){	
							$('#msg').text(data.msg);
							$('#msg').css("display","block");
							//点击修改后要将原来的数据替换
							$("#attr_"+id+" :eq(1)").text(name);
							$("#attr_"+id+" :eq(2)").text(def);
							$("#attr_"+id+" :eq(3)").text(val);
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
						}else{
					
							$('#msg').text(data.msg);
							$('#msg').css("display","block");
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json')
			
		          $( this ).dialog( "close" );
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });
		  });
  //删除
	$(document).on('click','[name=but_del]',function(){	
	    var id=$(this).attr('data-id');
		$( "<div>删除后不可恢复！确定要删除？</div>" ).dialog({
	     title:'删除确认',
		 modal: true,
	      buttons: {
	        "确定": function() {
				$(this ).dialog( "close" ); 
			$.get('<{:U("delattr")}>',{id:id},function(data){
					if(data.status==1){
					   $("#attr_"+id).remove();
						$('#msg').text(data.msg);
							$('#msg').css("display","block");	
						setTimeout(function(){$('#msg').fadeOut('slow')},1000);			
					}else{			
						$('#msg').text(data.msg);
							$('#msg').css("display","block");
					setTimeout(function(){$('#msg').fadeOut('slow');},1000);		
					}
				},'json');	
	        },
	        "取消": function() {
	          $( this ).dialog( "close" );
	        }
	      }
	    });
	    });		  
		  
		  
   
	});
</script>
</body>
</html>	
